<!--
 * @Description: 部门管理模块
 * @Author: zhihong deng
 * @Date: 2021-09-19 22:25:04
 * @LastEditors: zhihong deng
 * @LastEditTime: 2021-09-20 15:51:04
-->
<template>
  <div class="dept-manage">
    <div class="query-form">
      <el-form ref="queryForm" :model="queryForm" inline="true" label-width="80px">
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="queryForm.deptName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDeptList">查询</el-button>
          <el-button @click="handleReset('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="handleOpen">创建</el-button>
      </div>
      <!-- 有父子层级的表格需要
      row-key="_id"
      :tree-props="{children: 'children'}"
       -->
      <el-table
        stripe
        :data="deptList"
        row-key="_id"
        :tree-props="{children: 'children'}">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          v-bind="item"
          align="center">
        </el-table-column>
         <el-table-column label="操作" align="center" :width="150">
            <template #default="scope">
              <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
      <!-- 弹框 -->
      <el-dialog
        :title="action == 'create'?'创建部门':'编辑部门'"
        v-model="showModal"
        width="width"
        :before-close="dialogBeforeClose">
        <el-form ref="dialogForm" :model="deptForm" label-width="120px" :rules="rules">
          <el-form-item label="上级部门" prop="parentId">
          <el-cascader
            placeholder="请选择上级部门"
            v-model="deptForm.parentId"
            :props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
            clearable
            :options="deptList"
            :show-all-levels="true"
            width="100%"
          >
          </el-cascader>
          </el-form-item>
          <el-form-item label="部门名称" prop="deptName">
            <el-input placeholder="请输入部门名称" v-model="deptForm.deptName"></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="user">
            <el-select placeholder="请选择部门负责人" v-model="deptForm.user" @change="handleUser">
              <el-option
                v-for="item in userList"
                :key="item.userId"
                :label="item.userName"
                :value="`${item.userId}/${item.userName}/${item.userEmail}`">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="负责人邮箱" prop="userEmail">
            <el-input placeholder="请输入负责人邮箱" v-model="deptForm.userEmail" disabled></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "dept",
  data() {
    return {
      queryForm: {
        deptName: ''
      },
      columns: [
        {
          label: '部门名称',
          prop: 'deptName'
        },
        {
          label: '负责人',
          prop: 'userName'
        },
        {
          label: '创建时间',
          prop: 'createTime'
        },
        {
          label: '更新时间',
          prop: 'updateTime'
        },
      ],
      deptList: [],
      action: '',
      deptForm: {
        parentId: [null]
      },
      rules: {
        parentId: [
          {required: true, message: "请选择上级部门", trigger: "blur"}
        ],
        deptName: [
          {required: true, message: "请输入部门名称", trigger: "blur"}
        ],
        user: [
          {required: true, message: "请选择部门负责人", trigger: "blur"}
        ]
      },
      showModal: false,
      userList: []
    }
  },
  mounted() {
    this.getDeptList()
    this.getAllUserList()
  },
  methods: {
    // 初始化部门列表
    async getDeptList() {
      let list = await this.$api.getDeptList(this.queryForm)
      this.deptList = list
    },
    // 获取所有用户列表
    async getAllUserList() {
      let list = await this.$api.getAllUserList()
      this.userList = list      
      console.log('获取所有用户列表', this.userList);
    },
    // 选择负责人
    handleUser(val) {
      const [userId, userName, userEmail] = val.split('/')
      Object.assign(this.deptForm, {userId, userName, userEmail})
    },
    // 重置
    handleReset(form) {
      this.$refs[form].resetFields()
      this.getDeptList()
    },
    // 部门创建
    handleOpen() {
      this.showModal = true
      this.action = 'create'
    },
    handleEdit(row) {
      this.showModal = true
      this.action = 'edit'
      this.$nextTick(() => {
        Object.assign(this.deptForm,row, {
          user: `${row.userId}/${row.userName}/${row.userEmail}`
        })
      })
    },
    async handleDel(_id) {
      this.action = 'delete'
      await this.$api.deptSubmit({_id, action: this.action})
      this.$message.success('删除成功')
      this.handleClose()
      this.getDeptList()
    },
    handleClose() {
      this.showModal = false
      this.handleReset('dialogForm')
    },
    handleSubmit() {
      this.$refs.dialogForm.validate( async (valid) => {
        if(valid){
          let { action, deptForm } = this
          let params = { ...deptForm,action }
          delete params.user
          await this.$api.deptSubmit(params)
          this.$message.success('创建成功')
          this.handleClose()
          this.getDeptList()
        }
      })

    }
  },
}
</script>

<style>

</style>